<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="exportData" :loading="exportLoading">导出</el-button>
    <div class="filter-container">
      <el-radio-group v-model="mo_flag" class="filter-item" @change="changeMo">
        <el-radio-button label="未上线工单"></el-radio-button>
        <el-radio-button label="已上线工单"></el-radio-button>
      </el-radio-group>
      <el-select class="filter-item" style="width: 380px" v-model="motmp" placeholder="请先选择工单号" multiple filterable
        clearable>
        <el-option v-for="v in moData" :key="v.id" :label="v.mo_no + v.key_part_name" :value="v.mo_no"> </el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="search">查询</el-button>
      <el-button class="filter-item" type="warning" plain @click="reset">重置</el-button>

    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template #content="{ key, row }">
        <div v-if="key == 'stauts'">
          <span class="text-label" :class='statusClass[row[key]]'>{{row.stauts}}</span>
        </div>
        <span v-else>{{ row[key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="search" v-show="total > 0"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import dayjs from 'dayjs'
export default {
  mixins: [commonMixin],
  name: 'moMaterial',
  data: function () {
    return {
      name: '工单物料',
      apiList: this.$api.onMaterialData,
      mo_flag: '未上线工单',
      statusClass: { NG: 'bg-red', OK: 'bg-green' },
      motmp: [],
      query: {
        size: 10,
        page: 1,
      },
      moData: [],
      list: [],
      exportDataObj: {},
      total: 0,
      tableProps: {
        hideOperations: true,
      },
      columns: [
        { title: '料号', key: 'key_part_no' },
        { title: '名称', key: 'key_part_name' },
        { title: '规格', key: 'key_part_desc' },
        { title: '需求量', key: 'total' },
        { title: '原料仓库存', key: 'rawMaterialInventory' },
        { title: '状态', key: 'stauts' },
      ],
    }
  },
  methods: {},
  created: function () {
    this.getSelectData()
  },
  methods: {
    search() {
      if (!this.motmp.length) {
        this.$message.warning('请选择工单号！！！')
        return false
      }
      let mo_id = this.motmp.join(',')
      this.exportDataObj = { mo_id: mo_id, ...this.query, stauts: this.mo_flag == '未上线工单' ? 0 : 1 }
      this.getList({ mo_id: mo_id, ...this.query, stauts: this.mo_flag == '未上线工单' ? 0 : 1 })
    },
    getList(query) {
      if (!query.mo_id) {
        this.$message.warning('请选择工单号！！！')
        return false
      }
      this.pageLoading = true
      this.$request(this.apiList, query)
        .then((res) => {
          this.list = res.list
          this.total = res.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    changeMo() {
      this.getSelectData()
    },
    getSelectData() {
      this.motmp = []
      let status = '0'
      this.list = []
      this.mo_flag === '未上线工单' ? (status = '0') : (status = '1')
      this.$request(this.$api.onMaterialSelect, { page: 1, size: 999, status: status }).then((res) => {
        this.moData = res.list
      })
    },
    reset() {
      this.motmp = []
      this.mo_flag = '未上线工单'
      this.total = 0
      this.list = []
      this.moData = []
    },
    exportData() {
      let url = this.apiList
      this.exportLoading = true
      this.$request(url, this.exportDataObj)
        .then((r) => {
          var exprotList = this.formatList(r.list)
          import('@/vendor/Export2Excel').then((excel) => {
            const filterVal = this.columns.map((item) => {
              return item.key
            })
            const tHeader = this.columns.map((item) => {
              return item.title || item.key
            })
            const data = exprotList.map((v) => filterVal.map((j) => v[j]))
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.name + '_' + dayjs().format('YYYYMMDD'),
            })
          })
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
  },
}
</script>

<style scoped>
</style>
